<script setup lang="ts">
import { SearchConfig } from './config/search-config';
import { tableConfig } from './config/table-config';
import { editConfig } from './config/edit-config';
import { generateNameToLevel } from '@/config/constant';
import {
    doGetAuxiliaryList,
    doDelAuxiliaryList,
    doUpdateAuxiliary
} from '@/api/modeling/auxiliaryResources/index';
import { Plus, Delete } from '@element-plus/icons-vue';
import { handleDelKey } from '@/utils';
import { EType } from '@/config';
import addDataStore from '@/store/modules/addDataStore';
import paramsStore from '@/store/modules/paramsStore';
import type { AuxiliaryData } from '@/api/modeling/auxiliaryResources/model/type';

defineOptions({
    name: 'AuxiliaryResourcesList'
});

const router = useRouter();

const { handleAddData } = addDataStore();

const tableRef = ref<TableRef>();

const searchRef = ref();

/**
 * @: 删除相关
 */
const selectIds = ref<Array<string>>([]);
const auxiliaryList = ref<AuxiliaryData[]>([]);
const handleSelection = (auxiliary: AuxiliaryData[]) => {
    auxiliaryList.value = auxiliary;
    selectIds.value = auxiliary.map(item => item.id);
};

/**
 * @: 删除相关
 */
const { handleDel, rowDel } = useDelRow(tableRef, selectIds, doDelAuxiliaryList);

/**
 * @: 表格新增
 */
const handleAdd = () => {
    handleAddData('auxiliaryResourcesAddData');
    router.push('/auxiliaryResources/add');
};

const mapStatus = {
    IDLE: { text: '空闲', icon: 'zhuangtai-kongxian1' },
    USING: { text: '使用中', icon: 'zhuangtai-qiyong' },
    SCRAP: { text: '报废', icon: 'zhuangtai-baofei' },
    REPAIRING: { text: '维修中', icon: 'zhuangtai-weixiuzhong' }
};

/**
 * @: 编辑相关
 */
const baseEditRef = ref<EditRef>();
const handleEdit = (row: AuxiliaryData) => {
    baseEditRef.value?.open(row);
};

/**
 * @: 处理编辑的提交数据
 */
const handleSubmitData = (row: AuxiliaryData) => {
    const arr = ['updateTime', 'dataSource', 'creator', 'createTime'];
    return handleDelKey(row, arr);
};

/**
 * @: 搜索默认参数
 */
const params = paramsStore();
const { auxiliary } = storeToRefs(params);
const searchConfig = computed(() => {
    SearchConfig.items[0].default = auxiliary.value;
    return SearchConfig;
});
</script>

<template>
    <q-page>
        <!-- 搜索 -->
        <base-search
            ref="searchRef"
            :key="auxiliary"
            :table-ref="tableRef"
            :search-config="searchConfig"
            @refresh="params.setAuxiliary('')"
        />

        <base-table
            :id="generateNameToLevel('2')"
            ref="tableRef"
            :key="auxiliary"
            :table-config="tableConfig"
            :get-data-fn="doGetAuxiliaryList"
            :added-params="{ auxiliaryResourceCoding: auxiliary }"
            @selection-change="handleSelection"
            @edit="handleEdit"
            @del="rowDel"
        >
            <template #tableHeadStart>
                <el-button type="primary" :icon="Plus" @click="handleAdd">新增</el-button>
            </template>

            <template #tableHeadEnd>
                <el-button
                    class="m-r-16"
                    :disabled="!selectIds.length"
                    :icon="Delete"
                    @click="handleDel(`选中${selectIds.length}行数据，删除后无法恢复，确认删除？`)"
                >
                    删除
                </el-button>
            </template>

            <!-- 状态 -->
            <template #status="{ row }: SlotData<AuxiliaryData>">
                <div class="align-center">
                    <q-icon size="12" class-name="m-r-8" :icon-class="mapStatus[row.status].icon" />
                    {{ mapStatus[row.status].text }}
                </div>
            </template>

            <!-- 类型 -->
            <template #type="{ row }: SlotData<AuxiliaryData>">
                {{ EType[row.type] }}
            </template>
        </base-table>

        <!-- 编辑 -->
        <base-edit
            ref="baseEditRef"
            :edit-config="editConfig"
            :updateFn="doUpdateAuxiliary"
            :handle-submit-data="handleSubmitData"
            :table-ref="tableRef"
            width="600px"
            column
        />
    </q-page>
</template>

<style scoped lang="scss">
@include b(align-center) {
    display: flex;
    align-items: center;
}
</style>
